<template>
  <div id="app" style="height:100%;">
    <view-box ref="viewBox" :body-padding-bottom="isTabbarDemo ? '0': '50px'" :class="{'hide':$route.path=='/login'}">
      <transition  :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
        <keep-alive>
          <router-view class="router-view"></router-view>
        </keep-alive>
      </transition>
      <!--底部导航 路由 -->
      <tabbar class="vux-demo-tabbar" v-show="!isTabbarDemo"  slot="bottom">
        <tabbar-item :selected="$route.path === '/home'" link="/home">
          <img slot="icon" src="@/common/image/home_n.png">
          <img slot="icon-active" src="@/common/image/home_s.png">
          <span slot="label">首页</span>
        </tabbar-item>
        <tabbar-item :selected="$route.path === '/develop'" link="/develop?status=apply">
          <img slot="icon" src="./common/image/dangyuanfazhan_n.png">
          <img slot="icon-active" src="./common/image/dangyuanfazhan_s.png">
          <span slot="label">党员发展</span>
        </tabbar-item>
        <tabbar-item :selected="$route.path === '/demonstrate'" link="/demonstrate?status=dynamic">
          <img slot="icon" src="./common/image/shifandangke_n.png">
          <img slot="icon-active" src="./common/image/shifandangke_s.png">
          <span slot="label">示范党课</span>
        </tabbar-item>
        <tabbar-item :selected="$route.path === '/theme'" link="/theme">
          <img slot="icon" src="./common/image/zhutidangri_n.png">
          <img slot="icon-active" src="./common/image/zhutidangri_s.png">
          <span slot="label">主题党日</span>
        </tabbar-item>
        <tabbar-item :selected="$route.path === '/user'" link="/user">
          <img slot="icon" src="./common/image/wode_n.png">
          <img slot="icon-active" src="./common/image/wode_s.png">
          <span slot="label">我的</span>
        </tabbar-item>
      </tabbar>
    </view-box>
    <transition>
      <router-view name="subPage"></router-view>
    </transition>
    <div v-transfer-dom>
      <loading v-model="isLoading"></loading>
    </div>
  </div>
</template>

<script>
import { Loading, ViewBox, TransferDom, Tabbar, TabbarItem } from "vux";
import { mapState, mapGetters } from "vuex";
import rem from "./config/rem.js";
export default {
  directives: {
    TransferDom
  },
  components: {
    Loading,
    ViewBox,
    Tabbar,
    TabbarItem
  },
  created() {
    let date = new Date();
    date = date.getTime();
    if (
      window.localStorage.getItem("time") &&
      date - window.localStorage.getItem("time") > 86400000
    ) {
      // window.localStorage.removeItem("user");
      this.$router.replace("/login");
    }
  },
  name: "app",
  computed: {
    ...mapState({
      isLoading: state => state.common.isLoading,
      direction: state => state.common.direction
    }),
    isTabbarDemo() {
      if (!this.direction) return "";
      return this.$route.path.split("/").length > 2;
    }
  },
  data() {
    return {
      enterAnimate: "", //页面进入动效
      leaveAnimate: "" //页面离开动效,
    };
  },
  watch: {
    $route(to, from) {
      const toDepth = to.path.split("/").length;
      const fromDepth = from.path.split("/").length;

      this.enterAnimate =
        toDepth > fromDepth ? "animated fadeInRight" : "animated fadeInLeft";
      this.leaveAnimate =
        toDepth > fromDepth ? "animated fadeOutLeft" : "animated fadeOutRight";
      //一级页面
      if (toDepth == 2) {
        this.enterAnimate = "";
        this.leaveAnimate = "";
      }
    }
  }
};
</script>

<style lang="less">
@import "~vux/src/styles/reset.less";
@import "~vux/src/styles/1px.less";
@import "./common/style/common.less";
@import "./common/style/animate.css";

body {
  background-color: #fbf9fe;
}
.padTop {
  padding-top: 2.875rem;
}
// header
.vux-header {
  width: 100%;
  padding: 0.1875rem 0 !important;
  position: fixed !important;
  left: 0px;
  top: 0px;
  z-index: 100;
  background: rgb(214, 60, 50) !important;
  .vux-header-left {
    top: 0.875rem !important;
    line-height: 1.3125rem !important;
    left: 1.125rem !important;
    .left-arrow {
      width: 1.875rem !important;
      height: 1.875rem !important;
      &::before {
        width: 0.75rem !important;
        height: 0.75rem !important;
        top: 0.5rem !important;
        left: 0.4375rem !important;
        border-color: #fff !important;
      }
    }
  }
  .vux-header-title {
    height: 2.5rem !important;
    line-height: 2.5rem !important;
    font-size: 1.1875rem !important;
    font-family: "SourceHanSansSC-Regular";
  }
  .vux-header-right {
    right: 0.9375rem !important;
    top: 0.875rem !important;
    line-height: 1.3125rem !important;
  }
}

.router-view {
  width: 100%; // padding-bottom: 55px;
}

// tab
.vux-tab-wrap {
  padding-top: 2.75rem !important;
}
.vux-tab-container {
  height: 2.75rem !important;
}
.vux-tab {
  height: 2.75rem !important;
  .vux-tab-item {
    line-height: 2.75rem !important;
  }
}

// tabber
.weui-tabbar {
  position: fixed !important;
  background: rgb(246, 245, 250);
  &::before {
    display: none;
  }
}
.weui-tabbar__label {
  margin-top: 4px;
  color: rgb(132, 123, 123);
}
.weui-tabbar__icon {
  width: 22px !important;
  height: 22px !important;
}
.weui-tabbar__item {
  &.weui-bar__item_on {
    .weui-tabbar__icon,
    .weui-tabbar__icon > i,
    .weui-tabbar__label {
      font-size: 10px;
      color: rgb(219, 30, 25) !important;
    }
  }
}

//筛选弹框
.vux-popup-mask {
  background: rgba(0, 0, 0, 0.4) !important;
}
.vux-popup-dialog {
  background: rgba(21, 31, 36, 0.35) !important;
}
.vux-popup-dialog.vux-popup-right {
  width: 15.625rem !important;
}
// 筛选
.chooseBox {
  height: 100%;
  padding: 2.0625rem 0 0 0;
  color: rgb(255, 255, 255);
  .box_title {
    font-size: 1.125rem;
    text-align: center;
  }
  .box_classify {
    padding: 0 0.8375rem;
    .classify_name {
      font-size: 1.0625rem;
      margin-bottom: 0.875rem;
    }
    .box_time {
      margin-top: 1.875rem;
      .classify_date {
        .vux-checker-box {
          margin-bottom: 1.1875rem;
        }
        .weui-cells {
          width: 13.625rem;
          margin: 0;
          border-radius: 0.3125rem;
        }
        .vux-datetime {
          font-size: 0.875rem;
          color: rgb(0, 0, 0);
        }
        .vux-cell-value {
          font-size: 0.9375rem;
          color: rgb(123, 138, 151);
        }
        .endDate {
          margin-top: 0.375rem;
        }
      }
    }
    .box_name {
      margin-top: 1.5625rem;
    }
    .classify_search {
      .weui-cells {
        border-radius: 0.3125rem;
      }
    }
  }
  .box_button {
    margin-top: 3.125rem;
    .weui-btn {
      width: 13.75rem;
      background: #47b7c7;
    }
  }
}
.normal_date {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  color: rgb(153, 153, 153);
  border: 1px solid rgb(153, 153, 153);
  border-radius: 0.3125rem;
  margin-right: 0.8375rem;
}
.normal_date:last-child {
  margin-right: 0;
}
.selected_date {
  color: rgb(255, 255, 255);
  font-weight: bold;
  border-color: rgb(255, 255, 255);
  background: #47b7c7;
}

//
.pswp__button{
  display: none!important;
}
</style>
